<template>
  <div class="movie-card" style="position: relative">
    <div class="poster">
      <!-- <img src="./poster.jpg" alt="电影海报" /> -->
      <div
        class="img-example"
        :style="{ 'background-color': randomColor() }"
        @click="dialog_movieInfor = true"
      ></div>
      <label
        class="ui-bookmark"
        style="position: absolute; z-index: 999; left: 15px; top: 1px"
      >
        <input type="checkbox" v-model="details.todo" />
        <div class="bookmark">
          <svg viewBox="0 0 32 32">
            <g>
              <path
                d="M27 4v27a1 1 0 0 1-1.625.781L16 24.281l-9.375 7.5A1 1 0 0 1 5 31V4a4 4 0 0 1 4-4h14a4 4 0 0 1 4 4z"
              ></path>
            </g>
          </svg>
        </div>
      </label>
    </div>
    <div class="details">
      <div class="header">
        <h3 class="title">{{ details.movieName }}</h3>
        <i
          @click="edit(details.id)"
          class="el-icon-s-tools"
          style="cursor: pointer"
        >
        </i>
      </div>
      <div class="rating">
        <el-rate
          v-model="details.persionScore / 2"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
          :max="5"
        >
        </el-rate>
      </div>
      <div>
        <span>距上次观看已过</span>
        <span style="color: #1677ff; font-weight: 600">
          {{ contDays(details.total[details.total.length - 1].time) }}
        </span>
      </div>
      <div class="total-records">观看次数：{{ details.total.length }}</div>
      <div style="display: flex; flex-wrap: wrap">
        <div
          v-for="(totalArray, index) in details.total.slice(0, 6)"
          :key="index"
          style="margin-top: 5px"
        >
          <el-popover placement="bottom" width="200" trigger="click">
            <div class="save" slot="reference">
              {{ index + 1 }}
            </div>
            <div>日期：{{ totalArray.time }}</div>
            <div>地址：{{ totalArray.address }}</div>
            <div style="margin-top: 5px">
              <el-popover
                v-for="(accompanyArray, index_2) in totalArray.accompany"
                :key="index_2"
                placement="top-start"
                :title="accompanyArray"
                width="200"
                trigger="hover"
              >
                <el-avatar
                  slot="reference"
                  shape="square"
                  size="small"
                  style="margin-right: 8px"
                  src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
                >
                </el-avatar>
                <div>
                  {{ accompanyArray }}
                </div>
              </el-popover>
            </div>
          </el-popover>
        </div>
        <div v-if="details.total.length > 6">
          <div class="save" style="margin-top: 5px">...</div>
        </div>
        <div v-if="details.total.length > 6">
          <div class="save" style="margin-top: 5px">
            {{ details.total.length - 1 }}
          </div>
        </div>
      </div>
      <div class="actions">
        <!-- <button class="favorite-button">⭐ 收藏</button> -->
        <button
          class="watch-later-button"
          style="margin-left: auto"
          @click="addToDoList(details.moive)"
        >
          加入待观看{{ details.favorite }}
        </button>
        <button class="secondary-cta">{{ details.collect }}</button>
      </div>
    </div>
    <el-dialog :title="details.movieName" :visible.sync="dialog_movieInfor">
      <movie_infromationVue :moivedetails="details"></movie_infromationVue>
    </el-dialog>
  </div>
</template>

<script>
import movie_infromationVue from './movie_infromation.vue';
export default {
  components: {
    movie_infromationVue
  },
  props: {
    details: Object
  },
  data () {
    return {
      dialog_movieInfor: false,
    }
  },
  methods: {
    addToDoList (movie) {

    },
    edit (id) {
      this.$parent.edit_father(id);
    },
    randomColor () {
      let max = 999999
      let min = 100000
      let key = Math.floor(Math.random() * (max - min + 1)) + min
      return '#' + key
    },
    getToday () {
      let date = new Date(),
        year = date.getFullYear(), // 获取完整的年份(4位)
        month = date.getMonth() + 1, // 获取当前月份(0-11,0代表1月)
        strDate = date.getDate() // 获取当前日(1-31)
      if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
      if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
      let thisDay = `${year}-${month}-${strDate}`
      return thisDay
    },
    contDays (lastWatchDay) {
      if (!lastWatchDay) return '很久'
      /**
      * 计算两个日期之间的天数
      *  date1  开始日期 yyyy-MM-dd
      *  date2  结束日期 yyyy-MM-dd
      *  如果日期相同 返回一天 开始日期大于结束日期，返回0
      */
      function getDaysBetween (date1, date2) { // 计算两个日期之间的天数
        var startDate = Date.parse(date1);
        var endDate = Date.parse(date2);
        if (startDate > endDate) {
          return 0;
        }
        if (startDate == endDate) {
          return 1;
        }
        var days = (endDate - startDate) / (1 * 24 * 60 * 60 * 1000);
        return days;
      }
      function getFormatedStringFromDays (numberOfDays) { // 将天数转换为X年X月X日
        var years = Math.floor(numberOfDays / 365);
        var months = Math.floor(numberOfDays % 365 / 30);
        var days = Math.floor(numberOfDays % 365 % 30);
        // return [years, months, days].join(':');
        if (years) {
          if (days == 0 && months == 0) return years + '年'
          else if (days == 0) return years + '年' + months + '月'
          else return years + '年' + months + '月' + days + '天'
        } else if (months) {
          if (days == 0) return months + '月'
          else return months + '月' + days + '天'
        } else {
          return days + '天'
        }
      }
      return getFormatedStringFromDays(getDaysBetween(lastWatchDay, this.getToday()))
    }
  }
}
</script>

<style>
.img-example {
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  width: 145px;
  height: 0;
  padding-bottom: 133.33%;
  border: 1px solid #cccccc;
}

.movie-card {
  display: flex;
  flex-direction: row;
  background-color: #f2f3f7;
  border-radius: 0 0.75em 0.75em 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 400px;
  font-family: Arial, sans-serif;
  transition: ease 0.2s;
  border: 1.5px solid #f2f3f7;
  height: 195px;
}

.movie-card:hover {
  background-color: #d3ddf1;
  border: 1.5px solid #1677ff;
}

.poster img {
  width: 130px;
  height: auto;
}

.details {
  padding: 7px;
  flex-grow: 1;
  position: relative;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.edit-button {
  background: #007bff;
  border: none;
  color: white;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
}

.edit-button:hover {
  background: #0056b3;
}

.rating {
  color: #f39c12;
  font-size: 14px;
  margin: 5px 0;
}

.total-records {
  font-size: 14px;
  color: #333;
  margin: 5px 0;
}

.watch-records {
  list-style: none;
  padding: 0;
  margin: 0;
}

.record-item {
  padding: 5px 10px;
  margin: 5px 0;
  background: #f0f0f0;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

.record-item:hover {
  background: #d9edf7;
}

.record-item:hover::after {
  content: attr(data-details);
  position: absolute;
  left: 100%;
  top: 0;
  background: #ffffff;
  color: #333;
  border: 1px solid #ddd;
  padding: 5px;
  white-space: nowrap;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.actions {
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: center;
  margin-top: 10px;
}

.favorite-button,
.watch-later-button {
  font-size: 15px;
  background-color: transparent;
  color: #1677ff;
  border: none;
  border-radius: 1.5em;
  cursor: pointer;
}
.secondary-cta {
  background-color: transparent;
  border: none;
  font-size: 25px;
  font-weight: 400;
  color: #666;
  cursor: pointer;
  font-weight: 600;
}
.save {
  transition: 0.2s ease-in-out;
  border-radius: 8px;
  /* margin: 20px; */
  width: 25px;
  height: 25px;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px double #cccccc;
  margin: 0 5px 5px 0;
}

.save:hover {
  transform: scale(1.1) rotate(10deg);
  cursor: pointer;
}

.save:hover .svg {
  fill: #ced8de;
}

/* From Uiverse.io by Galahhad */
.ui-bookmark {
  --icon-size: 24px;
  --icon-secondary-color: rgb(77, 77, 77);
  --icon-hover-color: rgb(97, 97, 97);
  --icon-primary-color: gold;
  --icon-circle-border: 1px solid var(--icon-primary-color);
  --icon-circle-size: 35px;
  --icon-anmt-duration: 0.3s;
}

.ui-bookmark input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}

.ui-bookmark .bookmark {
  width: var(--icon-size);
  height: auto;
  fill: var(--icon-secondary-color);
  cursor: pointer;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  -webkit-transform-origin: top;
  -ms-transform-origin: top;
  transform-origin: top;
}

.bookmark::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  -webkit-box-shadow: 0 30px 0 -4px var(--icon-primary-color),
    30px 0 0 -4px var(--icon-primary-color),
    0 -30px 0 -4px var(--icon-primary-color),
    -30px 0 0 -4px var(--icon-primary-color),
    -22px 22px 0 -4px var(--icon-primary-color),
    -22px -22px 0 -4px var(--icon-primary-color),
    22px -22px 0 -4px var(--icon-primary-color),
    22px 22px 0 -4px var(--icon-primary-color);
  box-shadow: 0 30px 0 -4px var(--icon-primary-color),
    30px 0 0 -4px var(--icon-primary-color),
    0 -30px 0 -4px var(--icon-primary-color),
    -30px 0 0 -4px var(--icon-primary-color),
    -22px 22px 0 -4px var(--icon-primary-color),
    -22px -22px 0 -4px var(--icon-primary-color),
    22px -22px 0 -4px var(--icon-primary-color),
    22px 22px 0 -4px var(--icon-primary-color);
  border-radius: 50%;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.bookmark::before {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: var(--icon-circle-border);
  opacity: 0;
}

/* actions */

.ui-bookmark:hover .bookmark {
  fill: var(--icon-hover-color);
}

.ui-bookmark input:checked + .bookmark::after {
  -webkit-animation: circles var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: circles var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  -webkit-animation-delay: var(--icon-anmt-duration);
  animation-delay: var(--icon-anmt-duration);
}

.ui-bookmark input:checked + .bookmark {
  fill: var(--icon-primary-color);
  -webkit-animation: bookmark var(--icon-anmt-duration) forwards;
  animation: bookmark var(--icon-anmt-duration) forwards;
  -webkit-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.ui-bookmark input:checked + .bookmark::before {
  -webkit-animation: circle var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation: circle var(--icon-anmt-duration)
    cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  -webkit-animation-delay: var(--icon-anmt-duration);
  animation-delay: var(--icon-anmt-duration);
}

@-webkit-keyframes bookmark {
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes bookmark {
  50% {
    -webkit-transform: scaleY(0.6);
    transform: scaleY(0.6);
  }

  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@-webkit-keyframes circle {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }

  90% {
    width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes circle {
  from {
    width: 0;
    height: 0;
    opacity: 0;
  }

  90% {
    width: var(--icon-circle-size);
    height: var(--icon-circle-size);
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@-webkit-keyframes circles {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes circles {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  40% {
    opacity: 1;
  }

  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0;
  }
}
</style>


